<template>
	<view class="page">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="nav-bar">
				<image 
					class="back-icon" 
					src="/static/recharge/d2d56def1b7e4daac7adad19dc740323.png" 
					@tap="handleBack"
				/>
				<text class="title">确认订单</text>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<scroll-view class="content" scroll-y>
			<!-- 取餐信息卡片 -->
			<view class="store-card">
				<view class="store-info">
					<image class="store-icon" src="/static/order_submit/7cf83e4f8b5fdfea873cd11d4b01d044.png" />
					<view class="store-detail">
						<text class="store-name">KKmall京基店2楼188号</text>
						<text class="pickup-time">尽快取餐</text>
					</view>
				</view>
				
				<!-- 取餐方式选择 -->
				<view class="pickup-type">
					<view 
						class="type-item" 
						:class="{'active': pickupType === 'dine-in'}"
						@tap="switchPickupType('dine-in')"
					>
						<image src="/static/order_submit/bbdacb2185a84d001e76b2cfde875314.png" />
						<view class="type-info">
							<text class="type-name">堂食</text>
							<text class="type-desc">店内就餐</text>
						</view>
					</view>
					<view 
						class="type-item"
						:class="{'active': pickupType === 'takeout'}"
						@tap="switchPickupType('takeout')"
					>
						<image src="/static/order_submit/42647fbb92d04591f3631ba857a2035f.png" />
						<view class="type-info">
							<text class="type-name">外带</text>
							<text class="type-desc">打包带走</text>
						</view>
					</view>
				</view>

				<!-- 取餐时间选择 -->
				<view class="pickup-time" v-if="pickupType === 'takeout'">
					<view class="time-item" :class="{'active': timeType === 'now'}" @tap="selectTimeType('now')">
						<view class="time-info">
							<view class="title-wrap">
								<text class="time-title">立即取餐</text>
								<text class="time-desc">预计15分钟内可取</text>
							</view>
							<text class="time-status" v-if="timeType === 'now'">当前选择</text>
						</view>
						<view class="radio" :class="{'active': timeType === 'now'}"></view>
					</view>
					<view class="time-item" :class="{'active': timeType === 'schedule'}" @tap="showTimeSelector">
						<view class="time-info">
							<view class="title-wrap">
								<text class="time-title">预约取餐</text>
								<text class="time-desc">{{selectedTime || '选择取餐时间'}}</text>
							</view>
							<text class="time-status" v-if="timeType === 'schedule'">当前选择</text>
						</view>
						<view class="radio" :class="{'active': timeType === 'schedule'}"></view>
					</view>
				</view>
			</view>

			<!-- 订单商品列表 -->
			<view class="order-card">
				<view class="card-header">
					<text class="title">订单商品</text>
					<view class="add-btn" @tap="goToMenu">
						<text>继续点单</text>
					</view>
				</view>
				
				<view class="product-list">
					<view 
						class="product-item" 
						v-for="(item, index) in cartList" 
						:key="index"
					>
						<image class="product-image" :src="item.image" mode="aspectFill" />
						<view class="product-info">
							<text class="product-name">{{item.name}}</text>
							<text class="product-spec">{{item.specs}}</text>
							<view class="price-info">
								<text class="price">¥{{item.price}}</text>
								<text class="count">x{{item.count}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 优惠券和备注 -->
			<view class="options-card">
				<view class="option-item" @tap="selectCoupon">
					<text class="label">优惠券</text>
					<view class="value">
						<text class="discount">-¥{{discountAmount}}</text>
						<u-icon name="arrow-right" color="#999" size="24"></u-icon>
					</view>
				</view>
				<view class="option-item" @tap="addRemark">
					<text class="label">备注</text>
					<view class="value">
						<text class="remark">{{remark || '添加备注'}}</text>
						<u-icon name="arrow-right" color="#999" size="24"></u-icon>
					</view>
				</view>
			</view>

			<!-- 支付方式 -->
			<view class="payment-card">
				<text class="card-title">支付方式</text>
				<view class="payment-list">
					<view 
						class="payment-item"
						:class="{'active': paymentMethod === 'wechat'}"
						@tap="switchPayment('wechat')"
					>
						<view class="payment-info">
							<image class="payment-icon" src="/static/my/wechat-pay.png" />
							<text class="payment-name">微信支付</text>
						</view>
						<view class="radio"></view>
					</view>
					<view 
						class="payment-item"
						:class="{'active': paymentMethod === 'balance'}"
						@tap="switchPayment('balance')"
					>
						<view class="payment-info">
							<image class="payment-icon" src="/static/my/balance-pay.png" />
							<text class="payment-name">余额付</text>
						</view>
						<view class="radio"></view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部结算栏 -->
		<view class="bottom-bar">
			<view class="price-info">
				<text class="total-text">合计</text>
				<text class="total-price">¥{{finalPrice}}</text>
				<text class="discount-text">(已优惠¥{{discountAmount}})</text>
			</view>
			<view class="submit-btn" @tap="submitOrder">
				<text>立即支付</text>
			</view>
		</view>

		<!-- 时间选择弹窗 -->
		<u-popup 
			:show="showTimePicker"
			@close="closeTimeSelector"
			mode="bottom"
			border-radius="20"
		>
			<view class="time-selector">
				<view class="selector-header">
					<text class="title">选择取餐时间</text>
					<view class="close" @tap="closeTimeSelector">
						<u-icon name="close" color="#999" size="32"></u-icon>
					</view>
				</view>
				<scroll-view class="time-list" scroll-y>
					<view 
						class="time-option"
						v-for="(item, index) in timeSlots"
						:key="index"
						:class="{'active': tempSelectedTime === item.time}"
						@tap="selectTime(item)"
					>
						<text class="time">{{item.time}}</text>
						<text class="desc">{{item.desc}}</text>
					</view>
				</scroll-view>
				<view class="selector-footer">
					<view class="confirm-btn" @tap="confirmTimeSelect">
						<text>确定</text>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 在底部添加备注弹窗 -->
		<u-popup 
			:show="showRemarkPopup"
			@close="closeRemarkPopup"
			mode="bottom"
			border-radius="20"
		>
			<view class="remark-editor">
				<view class="editor-header">
					<text class="title">添加备注</text>
					<view class="close" @tap="closeRemarkPopup">
						<u-icon name="close" color="#999" size="32"></u-icon>
					</view>
				</view>
				<view class="editor-content">
					<textarea
						v-model="tempRemark"
						class="remark-input"
						placeholder="请输入备注信息，比如：少糖、少冰等"
						:maxlength="100"
						auto-height
					/>
					<view class="word-count">{{tempRemark.length}}/100</view>
				</view>
				<view class="editor-footer">
					<view class="confirm-btn" @tap="confirmRemark">
						<text>确定</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			cartList: [], // 购物车商品列表
			totalPrice: 0, // 总价
			discountAmount: 10, // 优惠金额
			finalPrice: 0, // 最终支付金额
			pickupType: 'dine-in', // 取餐方式：dine-in(堂食) / takeout(外带)
			remark: '少/少糖', // 备注
			paymentMethod: 'wechat', // 支付方式：wechat(微信) / balance(余额)
			storeInfo: {
				name: 'T2-29号登机口禁区内',
				pickupTime: '尽快取餐'
			},
			timeType: 'now', // 取餐时间类型：now(立即取餐) / schedule(预约取餐)
			selectedTime: '', // 选中的预约时间
			timeSlots: [], // 可选时间段列表
			showTimePicker: false, // 控制时间选择弹窗显示
			tempSelectedTime: '', // 临时存储选中的时间
			showRemarkPopup: false, // 控制备注弹窗显示
			tempRemark: '' // 临时存储备注信息
		}
	},
	computed: {
		// 计算最终支付金额
		finalAmount() {
			return (this.totalPrice - this.discountAmount).toFixed(2)
		}
	},
	onLoad() {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync()
		this.statusBarHeight = systemInfo.statusBarHeight
		
		// 获取购物车数据
		const cartData = uni.getStorageSync('cartData')
		if (cartData) {
			this.cartList = cartData.list
			this.totalPrice = cartData.price
			this.finalPrice = this.totalPrice - this.discountAmount
		}
	},
	methods: {
		// 返回上一页
		handleBack() {
			uni.navigateBack()
		},
		
		// 继续点单
		goToMenu() {
			// 保存当前订单信息到缓存
			uni.setStorageSync('tempOrderData', {
				pickupType: this.pickupType,
				remark: this.remark,
				paymentMethod: this.paymentMethod
			})
			
			// 跳转到点餐页面
			uni.switchTab({
				url: '/pages/menu/menu'
			})
		},
		
		// 切换取餐方式
		switchPickupType(type) {
			this.pickupType = type
			if (type === 'takeout') {
				this.generateTimeSlots()
			}
		},
		
		// 选择取餐时间类型
		selectTimeType(type) {
			this.timeType = type
			if (type === 'now') {
				this.selectedTime = ''
			}
		},
		
		// 显示时间选择器
		showTimeSelector() {
			this.generateTimeSlots()
			this.tempSelectedTime = this.selectedTime
			this.showTimePicker = true
		},
		
		// 关闭时间选择器
		closeTimeSelector() {
			this.showTimePicker = false
			this.tempSelectedTime = this.selectedTime
		},
		
		// 选择时间
		selectTime(item) {
			this.tempSelectedTime = item.time
		},
		
		// 确认时间选择
		confirmTimeSelect() {
			if (this.tempSelectedTime) {
				this.selectedTime = this.tempSelectedTime
				this.timeType = 'schedule'
				this.showTimePicker = false
			} else {
				uni.showToast({
					title: '请选择取餐时间',
					icon: 'none'
				})
			}
		},
		
		// 生成时间段列表
		generateTimeSlots() {
			const slots = []
			const now = new Date()
			const startTime = new Date(now.setMinutes(now.getMinutes() + 15))
			
			// 生成从现在开始到晚上10点的时间段
			for (let i = 0; i < 40; i++) {
				const time = new Date(startTime.getTime() + i * 15 * 60000)
				const hours = time.getHours()
				
				// 只显示营业时间内的时间段（假设营业时间到22:00）
				if (hours < 22) {
					slots.push({
						time: this.formatTime(time),
						desc: i === 0 ? '最早可取餐时间' : ''
					})
				}
			}
			
			this.timeSlots = slots
		},
		
		// 格式化时间
		formatTime(date) {
			const hours = date.getHours().toString().padStart(2, '0')
			const minutes = date.getMinutes().toString().padStart(2, '0')
			return `${hours}:${minutes}`
		},
		
		// 选择优惠券
		selectCoupon() {
			uni.navigateTo({
				url: '/pages/coupon/coupon',
				animationType: 'slide-in-right',
				animationDuration: 300
			})
		},
		
		// 添加备注
		addRemark() {
			this.showRemarkPopup = true
		},
		
		// 切换支付方式
		switchPayment(method) {
			this.paymentMethod = method
		},
		
		// 提交订单
		submitOrder() {
			// 构建订单数据
			const orderData = {
				orderNo: this.generateOrderNo(),
				products: this.cartList,
				totalPrice: this.totalPrice,
				discountAmount: this.discountAmount,
				finalPrice: this.finalPrice,
				pickupType: this.pickupType,
				type: this.pickupType === 'dine-in' ? 'dine-in' : 'takeout', // 添加订单类型
				status: 'processing', // 添加订单状态
				remark: this.remark,
				paymentMethod: this.paymentMethod,
				storeInfo: this.storeInfo,
				createTime: new Date().toLocaleString()
			}
			
			// 显示支付确认框
			uni.showModal({
				title: '确认支付',
				content: `需支付：¥${this.finalPrice}`,
				confirmText: '确认支付',
				success: (res) => {
					if (res.confirm) {
						// 模拟支付过程
						uni.showLoading({
							title: '支付中...'
						})
						
						setTimeout(() => {
							uni.hideLoading()
							
							// ���存订单数据到本地存储
							let orderList = uni.getStorageSync('orderList') || []
							orderList.unshift(orderData) // 新订单添加到列表开头
							uni.setStorageSync('orderList', orderList)
							
							// 清空购物车
							uni.removeStorageSync('cartData')
							
							// 显示支付成功
							uni.showToast({
								title: '支付成功',
								icon: 'success',
								duration: 2000,
								success: () => {
									// 延迟跳转到订单页
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/order/order'
										})
									}, 2000)
								}
							})
						}, 1500)
					}
				}
			})
		},
		
		// 生成订单号
		generateOrderNo() {
			const date = new Date()
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			const random = Math.floor(Math.random() * 10000).toString().padStart(4, '0')
			return `${year}${month}${day}${random}`
		},
		
		// 关闭备注弹窗
		closeRemarkPopup() {
			this.showRemarkPopup = false
		},
		
		// 确认备注
		confirmRemark() {
			if (this.tempRemark) {
				this.remark = this.tempRemark
				this.showRemarkPopup = false
				uni.showToast({
					title: '备注已添加',
					icon: 'success'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background-color: #f8f8f8;
	
	.header {
		background: #fff;
		padding-top: 88rpx;
		
		.nav-bar {
			position: relative;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.back-icon {
				position: absolute;
				left: 30rpx;
				width: 48rpx;
				height: 48rpx;
				padding: 10rpx;
			}
			
			.title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}
	}
	
	.content {
		padding: 20rpx;
		padding-bottom: 180rpx;
		
		.store-card {
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
			
			.store-info {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				
				.store-icon {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}
				
				.store-detail {
					.store-name {
						font-size: 30rpx;
						color: #333;
						font-weight: 500;
						margin-bottom: 8rpx;
					}
					
					.pickup-time {
						font-size: 26rpx;
						color: #999;
					}
				}
			}
			
			.pickup-type {
				display: flex;
				gap: 20rpx;
				
				.type-item {
					flex: 1;
					display: flex;
					align-items: center;
					padding: 20rpx;
					border-radius: 16rpx;
					border: 2rpx solid #eee;
					transition: all 0.3s;
					
					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}
					
					.type-info {
						.type-name {
							font-size: 28rpx;
							color: #333;
							margin-bottom: 4rpx;
						}
						
						.type-desc {
							font-size: 24rpx;
							color: #999;
						}
					}
					
					&.active {
						border-color: #8cd548;
						background: rgba(140, 213, 72, 0.05);
					}
				}
			}

			.pickup-time {
				margin-top: 20rpx;
				
				.time-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 30rpx;
					background: #fff;
					border-radius: 16rpx;
					border: 2rpx solid #eee;
					margin-bottom: 16rpx;
					
					.time-info {
						flex: 1;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.title-wrap {
							.time-title {
								font-size: 28rpx;
								color: #333;
								font-weight: 500;
								margin-bottom: 8rpx;
								display: block;
							}
							
							.time-desc {
								font-size: 24rpx;
								color: #999;
								display: block;
							}
						}
						
						.time-status {
							font-size: 24rpx;
							color: #8cd548;
							background: rgba(140, 213, 72, 0.1);
							padding: 4rpx 12rpx;
							border-radius: 100rpx;
						}
					}
					
					.radio {
						margin-left: 20rpx;
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						border: 2rpx solid #ddd;
						position: relative;
						pointer-events: none;
					}
					
					&.active {
						.time-title {
							color: #8cd548;
							font-weight: 500;
						}
						
						.radio {
							border-color: #8cd548;
							background: #8cd548;
							
							&::after {
								content: '';
								position: absolute;
								width: 16rpx;
								height: 16rpx;
								background: #fff;
								border-radius: 50%;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
							}
						}
					}
				}
			}
		}
		
		.order-card {
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
			
			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				
				.title {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
				}
				
				.add-btn {
					padding: 12rpx 24rpx;
					border-radius: 100rpx;
					border: 2rpx solid #8cd548;
					
					text {
						font-size: 26rpx;
						color: #8cd548;
					}
				}
			}
			
			.product-list {
				.product-item {
					display: flex;
					padding: 20rpx 0;
					
					&:not(:last-child) {
						border-bottom: 1rpx solid #f5f5f5;
					}
					
					.product-image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
						margin-right: 20rpx;
					}
					
					.product-info {
						flex: 1;
						display: flex;
						flex-direction: column;
						
						.product-name {
							font-size: 28rpx;
							color: #333;
							margin-bottom: 8rpx;
						}
						
						.product-spec {
							font-size: 24rpx;
							color: #999;
							margin-bottom: 16rpx;
						}
						
						.price-info {
							display: flex;
							justify-content: space-between;
							align-items: center;
							
							.price {
								font-size: 32rpx;
								color: #333;
								font-weight: bold;
							}
							
							.count {
								font-size: 26rpx;
								color: #999;
							}
						}
					}
				}
			}
		}
		
		.options-card {
			background: #fff;
			border-radius: 20rpx;
			padding: 0 30rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
			
			.option-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;
				
				&:not(:last-child) {
					border-bottom: 1rpx solid #f5f5f5;
				}
				
				.label {
					font-size: 28rpx;
					color: #333;
				}
				
				.value {
					display: flex;
					align-items: center;
					
					.discount {
						font-size: 28rpx;
						color: #ff4444;
						margin-right: 8rpx;
					}
					
					.remark {
						font-size: 26rpx;
						color: #999;
						margin-right: 8rpx;
					}
				}
			}
		}
		
		.payment-card {
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
			
			.card-title {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 30rpx;
			}
			
			.payment-list {
				.payment-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 0;
					
					&:not(:last-child) {
						border-bottom: 1rpx solid #f5f5f5;
					}
					
					.payment-info {
						display: flex;
						align-items: center;
						
						.payment-icon {
							width: 48rpx;
							height: 48rpx;
							margin-right: 16rpx;
						}
						
						.payment-name {
							font-size: 28rpx;
							color: #333;
						}
					}
					
					.radio {
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						border: 2rpx solid #ddd;
						position: relative;
					}
					
					&.active {
						.payment-name {
							color: #8cd548;
							font-weight: 500;
						}
						
						.radio {
							border-color: #8cd548;
							background: #8cd548;
							
							&::after {
								content: '';
								position: absolute;
								width: 16rpx;
								height: 16rpx;
								background: #fff;
								border-radius: 50%;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
							}
						}
					}
				}
			}
		}
	}
	
	.bottom-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #fff;
		padding: 20rpx 40rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
		
		.price-info {
			display: flex;
			align-items: baseline;
			
			.total-text {
				font-size: 28rpx;
				color: #333;
			}
			
			.total-price {
				font-size: 40rpx;
				color: #8cd548;
				font-weight: bold;
				margin: 0 8rpx;
			}
			
			.discount-text {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.submit-btn {
			padding: 0 60rpx;
			height: 88rpx;
			background: linear-gradient(135deg, #8cd548 0%, #6ab52e 100%);
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 8rpx 24rpx rgba(140, 213, 72, 0.3);
			
			text {
				font-size: 32rpx;
				color: #fff;
				font-weight: 500;
			}
			
			&:active {
				transform: scale(0.98);
			}
		}
	}
}

.time-selector {
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	
	.selector-header {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #f5f5f5;
		
		.title {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
		}
		
		.close {
			padding: 10rpx;
		}
	}
	
	.time-list {
		max-height: 600rpx;
		padding: 20rpx 30rpx;
		
		.time-option {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			background: #f8f8f8;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			
			.time {
				font-size: 32rpx;
				color: #333;
			}
			
			.desc {
				font-size: 24rpx;
				color: #999;
			}
			
			&.active {
				background: rgba(140, 213, 72, 0.1);
				
				.time {
					color: #8cd548;
					font-weight: 500;
				}
			}
		}
	}
	
	.selector-footer {
		padding: 30rpx;
		border-top: 1rpx solid #f5f5f5;
		
		.confirm-btn {
			height: 88rpx;
			background: linear-gradient(135deg, #8cd548 0%, #6ab52e 100%);
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			text {
				font-size: 32rpx;
				color: #fff;
				font-weight: 500;
			}
			
			&:active {
				transform: scale(0.98);
			}
		}
	}
}

.remark-editor {
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	
	.editor-header {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #f5f5f5;
		
		.title {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
		}
		
		.close {
			padding: 10rpx;
		}
	}
	
	.editor-content {
		padding: 30rpx;
		
		.remark-input {
			width: 100%;
			height: 200rpx;
			border: 1rpx solid #ddd;
			border-radius: 16rpx;
			padding: 20rpx;
			font-size: 28rpx;
			color: #333;
			line-height: 1.5;
			resize: none;
		}
		
		.word-count {
			text-align: right;
			font-size: 24rpx;
			color: #999;
			margin-top: 10rpx;
		}
	}
	
	.editor-footer {
		padding: 30rpx;
		border-top: 1rpx solid #f5f5f5;
		
		.confirm-btn {
			height: 88rpx;
			background: linear-gradient(135deg, #8cd548 0%, #6ab52e 100%);
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			text {
				font-size: 32rpx;
				color: #fff;
				font-weight: 500;
			}
			
			&:active {
				transform: scale(0.98);
			}
		}
	}
}
</style>